<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Order Confirmation</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 20px;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .container {
      background: white;
      border-radius: 10px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
      padding: 40px;
      max-width: 700px;
      width: 100%;
    }

    .success-icon {
      text-align: center;
      margin-bottom: 20px;
    }

    .success-icon svg {
      width: 80px;
      height: 80px;
      stroke: #4CAF50;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    h1 {
      color: #333;
      margin-bottom: 10px;
      text-align: center;
      font-size: 28px;
    }

    .subtitle {
      text-align: center;
      color: #666;
      margin-bottom: 30px;
      font-size: 16px;
    }

    .order-details {
      background: #f8f9fa;
      border-radius: 8px;
      padding: 25px;
      margin-bottom: 25px;
    }

    .detail-section {
      margin-bottom: 20px;
    }

    .detail-section:last-child {
      margin-bottom: 0;
    }

    .section-title {
      font-size: 14px;
      font-weight: 600;
      color: #888;
      text-transform: uppercase;
      margin-bottom: 10px;
      letter-spacing: 0.5px;
    }

    .detail-row {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px solid #e0e0e0;
    }

    .detail-row:last-child {
      border-bottom: none;
    }

    .detail-label {
      color: #555;
      font-weight: 500;
    }

    .detail-value {
      color: #333;
      font-weight: 400;
      text-align: right;
    }

    .price-section {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 25px;
    }

    .price-row {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
    }

    .total-price {
      font-size: 32px;
      font-weight: 700;
      margin-top: 10px;
    }

    .delivery-section {
      background: #e3f2fd;
      border-left: 4px solid #2196F3;
      padding: 20px;
      border-radius: 5px;
      margin-bottom: 25px;
    }

    .delivery-section h3 {
      color: #1976D2;
      margin-bottom: 10px;
      font-size: 18px;
    }

    .delivery-info {
      color: #555;
      line-height: 1.6;
    }

    .delivery-days {
      font-size: 24px;
      font-weight: 700;
      color: #1976D2;
    }

    .btn-back {
      width: 100%;
      padding: 15px;
      background: #e0e0e0;
      color: #333;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }

    .btn-back:hover {
      background: #d0d0d0;
    }

    .error-message {
      background: #ffebee;
      color: #c62828;
      padding: 20px;
      border-radius: 8px;
      border-left: 4px solid #c62828;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container" id="content">
    <!-- Content will be generated by JavaScript -->
  </div>

  <script>
    // Product prices in USD
    const productPrices = {
      'table': 299.99,
      'chair': 89.99,
      'sofa': 699.99,
      'desk': 249.99,
      'cabinet': 399.99
    };

    // Calculate delivery days based on ZIP code
    function calculateDeliveryDays(zipCode) {
      if (!zipCode) return 7;

      // Simple logic: use first digit of ZIP to determine delivery zone
      const firstDigit = parseInt(zipCode.toString().charAt(0));

      // ZIP codes 0-2: East Coast
      // ZIP codes 3-5: Central
      // ZIP codes 6-9: West Coast

      if (firstDigit >= 0 && firstDigit <= 2) {
        return 3;
      } else if (firstDigit >= 3 && firstDigit <= 5) {
        return 5;
      } else if (firstDigit >= 6 && firstDigit <= 9) {
        return 7;
      }

      return 7; // Default
    }

    // Get URL parameters
    function getUrlParams() {
      // Handle both URL search params and hash params
      let queryString = window.location.search;
      if (!queryString && window.location.hash) {
        // Extract query string from hash (format: #?param=value)
        queryString = window.location.hash.substring(2); // Remove '#?'
      }
      const params = new URLSearchParams(queryString);
      return {
        productType: params.get('productType'),
        color: params.get('color'),
        name: params.get('name'),
        email: params.get('email'),
        address: params.get('address'),
        city: params.get('city'),
        state: params.get('state'),
        zipCode: params.get('zipCode')
      };
    }

    // Format currency
    function formatCurrency(amount) {
      return new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD'
      }).format(amount);
    }

    // Capitalize first letter
    function capitalize(str) {
      if (!str) return '';
      return str.charAt(0).toUpperCase() + str.slice(1);
    }

    // Generate confirmation page
    function generateConfirmation() {
      const params = getUrlParams();
      const container = document.getElementById('content');

      // Check if we have required parameters
      if (!params.productType || !params.name) {
        container.innerHTML = `
          <div class="error-message">
            <h2>Order Information Missing</h2>
            <p>Unable to process order confirmation. Please return to the order form.</p>
            <button class="btn-back" onclick="window.history.back()">Go Back</button>
          </div>
        `;
        return;
      }

      // Calculate price and delivery
      const basePrice = productPrices[params.productType] || 0;
      const tax = basePrice * 0.08; // 8% tax
      const shipping = 29.99;
      const totalPrice = basePrice + tax + shipping;
      const deliveryDays = calculateDeliveryDays(params.zipCode);

      // Generate HTML
      container.innerHTML = `
        <div class="success-icon">
          <svg viewBox="0 0 52 52">
            <circle cx="26" cy="26" r="25"/>
            <path d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
          </svg>
        </div>

        <h1>Order Confirmed!</h1>
        <p class="subtitle">Thank you for your purchase, ${params.name}</p>

        <div class="order-details">
          <div class="detail-section">
            <div class="section-title">Product Details</div>
            <div class="detail-row">
              <span class="detail-label">Product:</span>
              <span class="detail-value">${capitalize(params.productType)}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">Color:</span>
              <span class="detail-value">${capitalize(params.color)}</span>
            </div>
          </div>

          <div class="detail-section">
            <div class="section-title">Customer Information</div>
            <div class="detail-row">
              <span class="detail-label">Name:</span>
              <span class="detail-value">${params.name}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">Email:</span>
              <span class="detail-value">${params.email}</span>
            </div>
          </div>

          <div class="detail-section">
            <div class="section-title">Shipping Address</div>
            <div class="detail-row">
              <span class="detail-label">Address:</span>
              <span class="detail-value">${params.address}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">City:</span>
              <span class="detail-value">${params.city}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">State:</span>
              <span class="detail-value">${params.state}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">ZIP Code:</span>
              <span class="detail-value">${params.zipCode}</span>
            </div>
          </div>
        </div>

        <div class="price-section">
          <div class="price-row">
            <span>Product Price:</span>
            <span>${formatCurrency(basePrice)}</span>
          </div>
          <div class="price-row">
            <span>Tax (8%):</span>
            <span>${formatCurrency(tax)}</span>
          </div>
          <div class="price-row">
            <span>Shipping:</span>
            <span>${formatCurrency(shipping)}</span>
          </div>
          <div class="price-row total-price">
            <span>Total:</span>
            <span>${formatCurrency(totalPrice)}</span>
          </div>
        </div>

        <div class="delivery-section">
          <h3>📦 Estimated Delivery</h3>
          <div class="delivery-info">
            <p>Your order will arrive in approximately <span class="delivery-days">${deliveryDays} days</span></p>
            <p style="margin-top: 10px; font-size: 14px;">We'll send tracking information to ${params.email} once your order ships.</p>
          </div>
        </div>

        <button class="btn-back" onclick="window.location.href='./fill-form.html'">Place Another Order</button>
      `;
    }

    // Initialize page
    document.addEventListener('DOMContentLoaded', generateConfirmation);
  </script>
</body>
</html>
